<template>
  <el-card class="search-card">
    <el-form :model="searchForm" :inline="true" label-width="80px">
      <el-form-item label="学期">
        <el-select 
          :model-value="searchForm.termId" 
          placeholder="请选择学期" 
          clearable 
          style="width: 250px"
          @update:model-value="$emit('update:termId', $event)"
        >
          <el-option v-for="term in terms" :key="term.id" :label="term.name" :value="term.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="课程">
        <el-select 
          :model-value="searchForm.courseId" 
          placeholder="请选择课程" 
          clearable 
          style="width: 200px" 
          filterable
          @update:model-value="$emit('update:courseId', $event)"
        >
          <el-option v-for="course in courses" :key="course.id" :label="course.name" :value="course.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="$emit('search')">
          <el-icon><Search /></el-icon> 搜索
        </el-button>
        <el-button @click="$emit('reset')">
          <el-icon><Refresh /></el-icon> 重置
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { Search, Refresh } from '@element-plus/icons-vue'

export default {
  name: 'TeachingMissionSearchFilter',
  components: {
    Search,
    Refresh
  },
  props: {
    searchForm: {
      type: Object,
      required: true
    },
    terms: {
      type: Array,
      default: () => []
    },
    courses: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:termId', 'update:courseId', 'search', 'reset']
}
</script>

<style scoped>
.search-card {
  margin-bottom: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  :deep(.el-form--inline .el-form-item) {
    display: block;
    margin-right: 0;
    margin-bottom: 10px;
  }
}
</style>
